<template>
	<view class="bg">
		<uni-nav-bar title="订单详情"  leftIcon="closeempty"  backgroundColor="rgba(220,38,38,0)" @clickLeft="close"
			:border="false"
			color="white"
		>
		</uni-nav-bar>
		<scroll-view scroll-y="true" class="scroll_viewStyle">
			<view style="display: flex;justify-content: space-around;margin:50rpx 0rpx;">
				<view style="color: #fff;display: flex;flex-flow:column;align-items: center;">
					<text style="font-size: 40rpx;margin-left: 15rpx;padding-bottom:15rpx;" >
						{{counter.allOrderData.AwardMoney>0?counter.allOrderData.AwardMoney:'暂无'}}
					</text>
					<text class="textStyle">中奖金额</text>
				</view>
				<view style="color: #fff;display: flex;flex-flow:column;align-items: center;">
					<text style="font-size: 40rpx;padding-bottom:15rpx;">
						{{viewdata.Statelist[counter.allOrderData.State]}}
					</text>
					<text class="textStyle">订单状态</text>
				</view>
				<view style="color: #fff;display: flex;flex-flow:column;align-items: center;">
					<text style="font-size: 40rpx;padding-bottom:15rpx;">
						{{counter.allOrderData.BetMoney}}
					</text>
					<text class="textStyle">投注金额</text>
				</view>
			</view>
			<view class="tishi" v-show="forecastMoneyShow(counter.allOrderData.Type,counter.allOrderData.State)" >
				<view style="text-align:center;margin-top:8rpx;">
					<text class="textStyle">预测金额:</text>
					<text v-if="maxiMoney != minMoney && minMoney>0" style="color: red;font-size:32rpx;font-weight:600;">
						￥{{minMoney}}~{{maxiMoney}}
					</text>
					<text v-else  style="color: red;font-size:32rpx;font-weight:600;">￥{{maxiMoney}}</text>
				</view>
			</view>
			<view v-if="isOpenCard(counter.allOrderData.Issue,counter.allOrderData.Isopen,counter.allOrderData.State,counter.allOrderData.Deadline)">
				<jczqCard v-if="counter.BettingContent.type==='竞彩足球'" :widths='685'></jczqCard>
								<dltCard v-else :widths='685'></dltCard>
			</view>
			
			<view v-else class="lockCard">
				<!-- <image style="width: 100rpx;height: 100rpx;opacity: 0.6;" src="@/static/img/main/lock.png"></image> -->
				<text style="color: #8d8d8d;font-size: 32rpx;padding: 20rpx 0;">开赛后公开</text>
				<text style="color: #8d8d8d;font-size: 32rpx;">
					截止时间 {{format(counter.allOrderData.Deadline*1000)}}
				</text>
			</view>
			<view class="detailCard" v-if="counter.allOrderData.Issue==2 && counter.allOrderData.AwardMoney!=counter.allOrderData.WinningMoney && (counter.allOrderData.WinningMoney/counter.allOrderData.BetMoney)>1.8">
				<view style="font-weight: bold;color:black;">奖金明细</view>
				<view class="detail">
					<text>票面中奖金额：</text>
					<text>{{counter.allOrderData.WinningMoney}}元</text>
				</view>
				<view class="detail">
					<text>佣金：</text>
					<text>{{(counter.allOrderData.WinningMoney*0.08).toFixed(2)}}元</text>
				</view>
				<view class="detail">
					<text>合计：</text>
					<text style="color: red;font-weight:bold;font-size:32rpx;">
						{{counter.allOrderData.AwardMoney}}元
					</text>
				</view>
			</view>
			<view class="reasonCard" v-show='counter.allOrderData.reason'>
				<view class="title">撤单原因:</view>
				<view style="white-space:normal;word-break: break-all;">
					<text>{{counter.allOrderData.reason}}</text>
				</view>
			</view>
			<orderData></orderData><!-- 订单信息卡片 -->
			<imgCard 
				:imgData='counter.allOrderData.ReturnImages'
				v-if="imgStateValue(counter.allOrderData.State)"
			></imgCard>
			<view style="width:100%;height:100rpx;"></view>
		</scroll-view>
		
		<!--  2023.10.28应客户要求取消
		<view class="bottom_button" @click="cancelOrder" v-show="counter.allOrderData.State==0||counter.allOrderData.State==1 && counter.allOrderData.user_id.id==counter.user_id">
			取消订单
		</view> -->
	</view>
</template>
<script>
import jczqCard from "@/components/common/yc-dingdanxiangqing-card/yc-jingcaizuqiu/yc-jingcaizuqiu";

import api from '@/common/vmeitime-http/';
import { useCounterStore } from '@/stores/counter';
import common from "@/common/common";
import { mapState } from 'vuex';

export default {
  components: {
    jczqCard,

  },
  data() {
    return {
      maxiMoney: 0,
      minMoney: 0,
      viewdata: {
        Statelist: ['认购中', '待接单', '待出票', '玩家撤销', '店主撤销', '系统撤销', '待开奖', '待中奖', '未中奖', '待派奖', '已派奖'],
        State: 0,
        money: 0,
        WinningMoney: 0,
        bonusmin: 0,
        bonusmax: 0
      },
    };
  },
  computed: {
    ...mapState({
      BettingContent: state => state.counter.BettingContent,
      access_token: state => state.counter.access_token,
      baseUrl: state => state.counter.baseUrl,
	  counter:state => state.counter
    })
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.BettingContent !== '') {
        this.maxiMoney = (this.BettingContent.remarks.bonusmax * this.BettingContent.remarks.Multiple).toFixed(2);
        this.minMoney = (this.BettingContent.remarks.bonusmin * this.BettingContent.remarks.Multiple).toFixed(2);
      }
    },

    forecastMoneyShow(gameTitle, state) {
      const arr = ['竞彩足球', '竞彩篮球', '北京单场', '胜负过关'];
      const index = arr.indexOf(gameTitle);
      return index !== -1 && state !== '9' && state !== '10' && state !== '8';
    },

    isOpenCard(Issue, isOpen, orderState, endTime) {
      if (Issue !== 2) return true;
      if (isOpen === '1') return true;
      const stateArr = ['3', '4', '5', '8', '9', '10'];
      const stateindex = stateArr.indexOf(orderState);
      if (stateindex !== -1) return true;
      const time = new Date().getTime();
      return time > (endTime) * 1000;
    },

    add0(m) {
      return m < 10 ? '0' + m : m;
    },

    format(shijianchuo) {
      const time = new Date(shijianchuo);
      const y = time.getFullYear();
      const m = time.getMonth() + 1;
      const d = time.getDate();
      const h = time.getHours();
      const mm = time.getMinutes();
      const s = time.getSeconds();
      return `${y}-${this.add0(m)}-${this.add0(d)} ${this.add0(h)}:${this.add0(mm)}:${this.add0(s)}`;
    },

    cancelOrder() {
      uni.request({
        url: `${this.baseUrl}/api/bettingend.mine.Order/ClearOrder`,
        header: { "server": "1", "ba-user-token": this.access_token },
        data: { "order_id": this.$store.state.allOrderData.order_id },
        success: (res) => {
          if (res.data.code === 1) {
            uni.showToast({
              title: res.data.msg,
              icon: 'success'
            });
            this.close();
          } else {
            uni.showToast({
              title: res.data.data,
              icon: 'error'
            });
          }
        }
      });
    },

    imgStateValue(e) {
      const arr = ['2', '6', '7', '8', '9', '10'];
      return arr.includes(e);
    },

    close() {
      this.$emit('close');
    }
  }
};
</script>

<style lang="scss">
	.scroll_viewStyle{
		height:calc(100vh - 160rpx - var(--status-bar-height) - env(safe-area-inset-bottom));
		width:100%;
	}
	.detailCard{
		width:680rpx;
		border-radius:15rpx;
		padding:20rpx;
		background-color: white;
		margin:20rpx auto;
	}
	.detail{
		font-size:26rpx;
		display:flex;
		justify-content: space-between;
		align-items:center;
		margin-top:20rpx;
	}
	.lockCard{
		width:720rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		background-color:white;
		margin: auto;
		border-radius:15rpx;
	}
	
	.bottom_button{
		width:100%;
		height:80rpx;
		background-color: #f37335;
		position: fixed;
		bottom:env(safe-area-inset-bottom);
		color:white;
		line-height:80rpx;
		font-weight: bold;
		box-sizing: border-box;
		text-align:center;
		border-radius:20rpx 20rpx 0 0;
	}
	.title{
		font-size: 32rpx;
		color: black;
		font-weight: 600;
		
	}
	.reasonCard{
		width:680rpx;
		padding:20rpx;
		border:1rpx solid #ffcbcb;
		background-color: #ffe0e0;
		margin:20rpx auto;
		border-radius:10rpx;
	}
	.bg{
		width: 100%;
		background:linear-gradient(0deg,#fdfdfd , #fd9854);
		/* background-color: #dddddd; */
		border-radius:30rpx 30rpx 0 0;
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-position: center 0;
	}
	
	.quanju {
		width: 100%;
		height: 100rpx;
		text-align: center;
		background-color: white;
		float: left;
		position: fixed;
		bottom: 0;
	}

	.tishi {
		width: 720rpx;
		height: 60rpx;
		border-radius:10rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin:20rpx auto;
	}
	.textStyle {
		font-size: 30rpx;
	}
	.xb {
		width: 100%;
		height: 2000rpx;
		background-color: #f5f5f5;
	}
</style>
